<template>
  <div>
    <div id="incomedetailed">
      <!-- <c-title :hide="false" text="提现"></c-title> -->
      <van-pull-refresh v-model="isLoading" @refresh="loadTop" success-text="刷新成功">
        <div class="top">
          <div class="arrow-left">
            <img class="arrow-left-img" src="../../../assets/images/tixian/xiangyou@2x.png" />
          </div>
          <div class="card">
            <div class="info">
              <div class="price">
                <div style="display:flex;flex:1;">
                  <div><img class="" style="width:18px;height:18px;margin-right:4px;" src="../../../assets/images/tixian/qiandai@2x.png" /></div>
                  <div>当前肽积分现价</div>
                </div>
                <div style="display:flex;flex:1;word-break:break-all;">1肽积分 = {{ datas.xianjia }}元</div>
              </div>
              <div class="number">
                <div style="display:flex;flex:1;">
                  <div><img class="" style="width:18px;height:18px;margin-right:4px;" src="../../../assets/images/tixian/jinbi@2x.png" /></div>
                  <div>肽积分</div>
                </div>
                <div style="display:flex;flex:1;word-break:break-all;justify-content: flex-end;">{{ datas.tai }}</div>
              </div>
              <div class="number">
                <div style="display:flex;">
                  <div><img class="" style="width:18px;height:18px;margin-right:4px;" src="../../../assets/images/tixian/shouxu@2x.png" /></div>
                  <div>手续费</div>
                </div>
                <div>{{ datas.shouxu }}%</div>
              </div>
              <div @click="openPopup" class="notice">提现到余额</div>
            </div>
          </div>
          <div class="record-title">提现记录</div>
          <div class="record">
            <div class="record-list" v-for="(item, index) in datas.list" :key="index">
              <div style="display:flex;align-items:center;flex:0.6">
                <div class="record-time">
                  <img class="record-time-img" src="../../../assets/images/tixian/icon@2x.png" />
                </div>
                <div class="record-time-text">{{ item.time }}</div>
              </div>
              <div style="display:flex;align-items:center;flex:0.4;justify-content:flex-end;">
                <div class="record-num">{{ item.num }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
    <van-popup v-model="popupSpecs" position="center" class="mint-popup-4" closeOnClickModal="true">
      <div class="popup">
        <div class="pop-title">提现到余额</div>
        <div class="pop-top">
          <div class="tai-title">
            <div style="width:72px;white-space: nowrap;">肽积分</div>
            <div>{{ datas.tai }}</div>
          </div>
          <div @click="tixianAll" class="tixian-all">点击全部提现</div>
        </div>
        <div>
          <input class="pop-input" v-model="taiValue" type="text" placeholder="请输入提现肽积分" />
        </div>
        <div style="width:300px;line-height:30px;margin:0 auto;display:flex;justify-content: space-between;">
          <div class="sxf-title">实际到账</div>
          <div class="sxf-text">{{ (taiValue * datas.xianjia - taiValue * datas.xianjia * (datas.shouxu / 100)).toFixed(2) }}元</div>
        </div>
        <div style="width:300px;line-height:40px;margin:0 auto;display:flex;justify-content: space-between;">
          <div class="sxf-title">手续费肽积分</div>
          <div class="sxf-text">{{ (taiValue * (datas.shouxu / 100)).toFixed(2) }}</div>
        </div>
        <div class="pop-btn">
          <div class="pop-btn-confirm" @click="tixian">确认</div>
          <div class="pop-btn-cancel" @click="cancelPopup">取消</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import withdraw_tai_controller from "./withdraw_tai_controller";
export default withdraw_tai_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.top {
  width: 100%;
  // height: 220px;
  background-image: url("../../../assets/images/tixian/bg@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.arrow-left {
  width: 96%;
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}
.arrow-left-img {
  width: 24px;
  height: 24px;
  margin: 0;
}
.card {
  width: 98%;
  // height: 179px;
  background-image: url("../../../assets/images/tixian/card-bg@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.info {
  width: 94%;
  padding: 10px;
  margin: 10px auto;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  // background: #fff;
  // border-radius: 8px;
  // box-shadow: 0px 0px 5px 0px rgba(163, 163, 163, 1);
}
.record {
  width: 92%;
}
.price,
.number {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 6px;
}
.notice {
  width: 130px;
  height: 29px;
  line-height: 29px;
  color: rgb(236, 131, 11);
  // padding-top: 10px;
  // padding-bottom: 6px;
  background-image: url("../../../assets/images/tixian/button-bg@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
  margin-top: 13px;
  margin-bottom: 5px;
  font-weight: bold;
  color: #C65031;
  font-size: 13px;
}
.record-title {
  width: 92%;
  margin: 0 auto;
  margin-bottom: 10px;
  // margin-bottom: 4px;
  display: flex;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #000000;
}
.record-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  width: 100%;
  // height: 120px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 10px;
}
.record-time-img {
  width: 31px;
  height: 31px;
}
.record-time-text {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #666666;
  margin-left: 8px;
}
.record-num {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #eb4680;
  word-break: break-all;
}
.van-popup {
  border-radius: 16px;
  background-image: url("../../../assets/images/tixian/popup-bg@2x.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  // height: 334px;
}
// 弹窗
.popup {
  width: 330px;
  // height: 270px;
  border-radius: 10px;
  // background: #fff;
}
.pop-title {
  height: 38px;
  line-height: 38px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #56190e;
}
.pop-top {
  display: flex;
  justify-content: space-between;
  width: 300px;
  margin: 0 auto;
  // height: 38px;
  // line-height: 38px;
  margin-top: 15px;
}
.tai-title {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  display: flex;
  flex: 1;
  justify-content: flex-start;
  word-break: break-all;
}
.pop-input {
  width: 300px;
  height: 40px;
  border: none;
  border-radius: 4px;
  text-align: center;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #303030;
  line-height: 40px;
  margin: 20px 0;
}
.sxf-title {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-bottom: 8px;
  display: flex;
  flex: 0.3;
}
.sxf-text {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #eb4680;
  display: flex;
  flex: 0.7;
  justify-content: flex-end;
  word-break: break-all;
}
.pop-btn {
  width: 300px;
  margin: 0 auto;
  // margin-top: 28px;
  margin-top: 30px;
  margin-bottom: 20px;
  display: flex;
  height: 44px;
  line-height: 44px;
  display: flex;
  justify-content: space-between;
}
.pop-btn-cancel {
  display: flex;
  // flex: 1;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 44px;
  border: 1px solid #c2c2c2;
  border-radius: 12px;
  line-height: 44px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.pop-btn-confirm {
  display: flex;
  // flex: 1;
  justify-content: center;
  align-items: center;
  width: 140px;
  height: 44px;
  background: linear-gradient(0deg, #df2f14 0%, #f0681f 99%);
  border-radius: 12px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 800;
  color: #ffffff;
  line-height: 44px;
}
.tixian-all {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  text-decoration: underline;
  color: #eb4680;
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

.van-nav-bar,
::v-deep .van-nav-bar__content {
  height: 40px;
}

::v-deep .van-nav-bar__title {
  font-weight: 700;
  font-size: 14px;
  color: #666;
}

::v-deep .van-nav-bar .van-icon {
  color: #666;
}

::v-deep .van-nav-bar__left {
  padding: 0 0 0 10px;
}

.pcStyle {
  width: 375px;
  margin: 0 auto;
  left: 50%;
  margin-left: -187.5px;
}

::v-deep .van-nav-bar__text {
  color: #666;
}
</style>
